<template>
    <!-- 页面暂不使用 -->
    <div class="view-body">
        <!--选择课程-->
        <div class="header-select">
            <van-dropdown-menu active-color="#075ebb">
                <van-dropdown-item :title="titleType" v-model="selectType" :options="typeList" @change="selectedType()"/>
                <van-dropdown-item :title="statusTitle" v-model="selectStatus" :options="statusList" @change="getStatus()"/>
            </van-dropdown-menu>
        </div>
        <!--我的课程-->
        <div style="height: calc(100% - 56px);" class="body-content" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getFreshCourseList"
                style="padding-bottom: 56px;"
                >
                    <div v-bind:class="{'height100' : total === 0}">
                        <div v-for="item in freshCourseList" :key="item.itmId" class="view-body-list" @click="detailJump(item.itmId,0, item.itmType, item.itmTitle)">
                            <div class="viewBody-listContent">
                                <div class="listContent-img" v-if="item.itmIcon">
                                    <img v-bind:src="appUrl + item.itmIcon" alt=""/>
                                    <div class="listContent-img-status">{{ typeTitle[item.courseStatus] }}</div>
                                    <span class="listContent-img-obligatory" v-if="item.recommendDetailDTO && item.recommendDetailDTO.compulsoryInd">{{ $t("cos_required") }}</span><!--必修-->
                                </div>
                                <div class="listContent-content">
                                    <div class="listContent-title"><i class="public-mobile-icon"></i>{{ item.itmTitle }}</div>
                                    <div class="listContent-scheduleContent" v-if="item.progress">  <!--完成进度 返回数据为百分比-->
                                        <div class="listContent-scheduleContent-status">
                                            <div class="cur" :style="{'width' : item.progress + '%' }" v-if="item.progress !== 0"></div>
                                        </div>
                                        <div>
                                            <span></span>
                                            <span>{{item.progress}}</span>
                                        </div>
                                    </div>
        <!--                               <div class="color999" style="margin-bottom: 5px;" v-if="item.item.itm_retake_ind && item.item.itm_retake_ind === 1 && item.app_status === 'I' && item.stress">-->
        <!--                                   {{ $t("cos_reread") }}-->
        <!--                               </div>&lt;!&ndash;重读&ndash;&gt;-->
                                    <div class="listContent-scheduleContent-buttom clearfix" style="margin-top:20px">
                                        <div>
                                            {{ courseType[item.itmType] }}
                                        </div>
                                        <div>  <!--人数-->
                                            <span class="people-num-icon"></span>{{item.totalLearner}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t("no_data") }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <common-loading :isLoading="isLoading"></common-loading>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import mixin from '@/components/mixin/Mixin';
import CommonLoading from '@/components/common/loading';
export default {
    name: 'myCourses',
    data() {
        return {
            // coursesList: [], //数据里被
            freshCourseList: [], //我的报名课程返回数据
            isTop: false,
            pageNo: 1, //分页页码
            maxPageNo: 0, // 最大页数 优化之前无限下拉加载发送请求问题
            total: 0, //总数
            selectType: '', //分页类型
            typeTitle: {
                I: this.$t('cos_app_inprogress'), //进行中
                C: this.$t('cos_app_completed'), //已完成
                notIAndC: this.$t('cos_other'), //其他
                F: this.$t('cos_app_fail'), //未完成
                Pending: this.$t('cos_app_pending'), //审批中
                Waiting: this.$t('cos_in_wait_list'), //等待队列
                W: this.$t('cos_app_withdrawn'), //已放弃
                Rejected: this.$t('cos_app_rejected') //已拒绝
            },
            types: {
                All: this.$t('type_all_title'),
                selfstudy: this.$t('cos_type_selfstudy'),
                classroom: this.$t('cos_type_classroom'),
                audiovideo: this.$t('find_open_course'),
                INTEGRATED: this.$t('cos_type_integrated')
            },
            status: {
                All: this.$t('type_all_title'),
                I: this.$t('cos_app_inprogress'), //进行中
                C: this.$t('cos_app_completed'), //已完成
                notIAndC: this.$t('cos_other') //其他
            },
            selectStatus: null,
            searchShow: false,
            isLoading: true,
            finished: false,
            isRefresh: false,
            titleType: this.$t('cos_type'),
            typeList: [],
            statusTitle: this.$t('cos_app_status'),
            statusList: []
        };
    },
    mixins: [mixin],
    components: {
        CommonLoading
    },
    methods: {
        init() {
            this.selectStatus = this.$route.query.selectStatus;
            this.getFreshCourseList('refresh');
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getFreshCourseList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        hideViewBox(num) {
            this['isShow' + num] = false;
        },
        /*@不虎 请求新的课程列表*/
        getFreshCourseList(option) {
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/course/my-sign-in/list`,
                params: {
                    pageNo: this.pageNo,
                    pageSize: 5
                },
                data: {
                    appStatus: this.selectStatus === 'All' ? '' : this.selectStatus,
                    itmTypeList: this.selectType === 'All' || this.selectType === '' ? null : [this.selectType],
                    isExamInd: false,
                    isAppSearch: true,
                    isMobileInd: true
                }
            }).then(res => {
                if (res && res.status === 200) {
                    if (option && option === 'refresh') {
                        this.freshCourseList = res.data.results;
                    } else {
                        this.freshCourseList = this.freshCourseList.concat(res.data.results);
                    }
                }
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.freshCourseList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        selectedType() {
            this.isLoading = true;
            this.pageNo = 1;
            this.total = 0;
            this.titleType = this.types[this.selectType];
            this.coursesList = [];
            this.getFreshCourseList('refresh'); // 修改学习状态时刷新
        },
        getStatus() {
            this.isLoading = true;
            this.isShow2 = false;
            this.pageNo = 1;
            this.total = 0;
            this.statusTitle = this.status[this.selectStatus];
            this.coursesList = [];
            this.getFreshCourseList('refresh'); // 修改课程类型时刷新
        },
        detailJump(id, tkhId, type, title) {
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${id}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: id, title: title}});
            } else {
                this.$router.push({path: `/course/${id}/0`});
            }
        },
        // 下拉菜单
        changeTypes() {
            this.typeList = [...this.getItemTypes.map(item => ({text: item.type, value: item.value}))];
            this.statusList = [...this.appStatus.map(item => ({text: item.type, value: item.value}))];
        }
    },
    mounted() {
        this.init();
        this.changeTypes();
    },
    beforeRouteEnter(to, from, next) {
        next(_this => {
            let selectStatus = _this.$route.query.selectStatus;
            if (from.path.indexOf('/home') !== -1 && selectStatus) {
                _this.isLoading = true;
                _this.init();
            }
        });
    }
};
</script>

<style scoped lang="less">
</style>
